<template>
    <!-- 留言板 -->
    <div>
        <!-- 留言框:内容长度10字之内 -->
        <el-input 
        @keyup.native.13="submit"
        v-model.trim="content" 
        type="textarea" 
        maxlength="10" 
        show-word-limit
        placeholder="留言信息">
        
        </el-input>
        <!-- 按钮:判断不许为空,长不能超过10个 -->
        <el-row :gutter="10" style="margin-top:10px">
            <el-col :offset="22" :span="2">
                <el-button type="primary" @click="submit">提交</el-button>
            </el-col>
        </el-row>
        <!-- 展示列表:请求回来的数据 -->
        <el-card v-for="(item,index) in words" :key="index">  
            <div slot="header">
                <el-row :gutter="10">
                    <el-col :span="3">
                        <el-avatar :size="50" :src="item.headIoc"></el-avatar>
                    </el-col>
                </el-row>
                <!-- 头像 -->
                <el-row>
                    <el-col>
                         <!-- 昵称 -->
                        <h4>{{item.name}}</h4>
                            <!-- 时间 -->
                        <p>{{ item.date }}</p>   
                    </el-col>
                </el-row>
               
            </div>
            <div class="card-body">
                <!-- 留言呢绒 -->
                <h5 v-html="item.content"></h5>
            </div>
        </el-card>

    </div>
</template>
<script>
export default {
    mounted(){
        
    },
    data(){
        return{
            //输入框的文本
            content:"",
            // 留言的数据集合
            words:[
                {
                    id:1, //后台数据库生成的
                    headIoc:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3394863399,243662136&fm=15&gp=0.jpg",
                    name:"老谢",
                    date:"2020年12月8日14:02:35",
                    content:"你这个王八蛋",
                }
            ]
        }
    },
    methods:{
        //提交留言
        submit(){
            //1.校验--不许为空,不许超过十个字符
            if(this.content.length > 10 || !this.content.length){
                return this.$message({
                    message:"抱歉,你不能提交",
                    type:"error",
                })
            }
            //2.假装ajax请求提交数据
            const date = this.fromatdate()
            this.words.unshift({
                id:date,
                date,
                name:"老谢",
                content:this.content,
                headIoc:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3394863399,243662136&fm=15&gp=0.jpg",
            })
            this.content = ''
            //3.接口如果返回成功,再次请求获取留言数据接口
            this.getWords()
        },
        //请求留言数据
        getWords(){
            //ajax获取留言数据

        },
        //获取格式化后的当前时间
        fromatdate(){
            //获取年
        const day= new Date()
        const Y = day.getFullYear()
        const M = day.getMonth()+1
        const d = day.getDate()
        const h = day.getHours()
        const m = day.getMinutes()
        const s = day.getSeconds()
        //const
         //return `${Y}-${M}-${d} ${h}:${m}:${s}`
        }
    },
    watch:{
        content(value){
            if(value.length >= 10){
                this.$message({
                    message:"这里有字数限制↘",
                    showClose:true,
                    type:'waning'
                })
            }
        }
    }
}
</script>